<template>
  <div class="index">
    <div id="player"></div>
  </div>
</template>

<script setup>
  import { onMounted, onUnmounted, getCurrentInstance, ref,reactive,toRefs, inject } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus'

  const player = ref(null) // 视频实例

  //加载外部JS脚本方法
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = url;

      script.onload = () => resolve(script);
      script.onerror = () => reject(new Error(`Script load error for ${url}`));

      document.head.appendChild(script);
    });
  };

  // 初始化播放器
  const loadPlayer = async () => {
    const scriptUrl = 'https://player.polyv.net/resp/vod-player/latest/player.js';
    const scriptLoaded = ref(false);
    try {
      await loadScript(scriptUrl);
      scriptLoaded.value = true;
      console.log('外部脚本加载成功！');
      player.value = polyvPlayer({
        wrap: '#player',
        width: '100%',
        height: 400,
        //screenshot: true,// 是否显示截图按钮
        //allowGetScreenshotData: true, // 截图API是否可用
        vid: '88083abbf5bcf1356e05d39666be527a_8' ,
      });
      player.value.on('s2j_onPlayerInitOver',function(vid) {
          console.log('播放器初始化完毕时触发：' + vid)

      });
      player.value.on('s2j_onPlayOver',function(vid) {
          console.log('播放结束时触发：' + vid)
      });
    } catch (error) {
      console.error('外部脚本加载失败:', error);
    }
  };
  onMounted(() => {
    loadPlayer()
  })

</script>

<style scoped>
.index {
  width: 100%;
  height: 100%;
}
</style>
